<template>
  <div class="nav-menu">
    <div class="logo">
      <img class="img" src="~@/assets/img/logo.svg" alt="logo"/>
      <span v-if="!collapse" class="title">ID.MI</span>
    </div>
    <el-menu
      :default-active="defaultValue"
      class="el-menu-vertical"
      :collapse="collapse"
      background-color="#0c2135"
      text-color="#b7bdc3"
      active-text-color="#0a60bd"
    >
      <el-menu-item @click="handleMenuItemClick('/main/analysis/dashboard')">
        <span>Dashboard</span>
      </el-menu-item>
      <el-menu-item @click="handleMenuItemClick('/main/system/vwcomplaint')">
        <span>VW Complaint</span>
      </el-menu-item>
      <el-menu-item @click="handleMenuItemClick('/main/system/vwncvqs')">
        <span>VW NCVQS</span>
      </el-menu-item>
      <el-menu-item @click="handleMenuItemClick('/main/system/audicomplaint')">
        <span>Audi Complaint</span>
      </el-menu-item>
      <el-menu-item @click="handleMenuItemClick('/main/system/audincvqs')">
        <span>Audi NCVQS</span>
      </el-menu-item>

      <el-menu-item @click="handleMenuItemClick('/main/system/user')">
        <span>User Manage</span>
      </el-menu-item>
    </el-menu>

  </div>
</template>

<script lang="ts">
import {defineComponent, computed, ref} from "vue";
import {useStore} from "@/store";
import {useRouter, useRoute} from "vue-router";

import {pathMapToMenu} from "@/utils/map-menus";

import {userMenus} from "@/store/login/config";
import localCache from '@/utils/cache'

export default defineComponent({
  props: {
    collapse: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    // store
    const store = useStore();

    // router
    const router = useRouter();
    const route = useRoute();
    const currentPath = route.path;

    // data
    console.log("data", userMenus);
    const menu = pathMapToMenu(userMenus, currentPath);
    console.log("menu", menu);
    // const defaultValue = ref(menu.id + '')
    const defaultValue = ref(40 + "");

    // event handle
    const handleMenuItemClick = (url_path: string) => {
      if (url_path === '/main/system/user') {
        const privilege = localCache.getCache('privilege')
        if (privilege === 'manager') {
          router.push({
            path: url_path
          });
        }else{
          router.push({
            path:"/main/analysis/overview"
          })
        }

      } else {
        router.push({
          path: url_path
        });
      }

    };
    return {
      userMenus,
      defaultValue,
      handleMenuItemClick
    };
  }
});
</script>

<style scoped lang="less">
.nav-menu {
  height: 100%;
  background-color: #001529;

  .logo {
    display: flex;
    height: 28px;
    padding: 12px 10px 8px 10px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .img {
      height: 100%;
      margin: 0 10px;
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      color: white;
    }
  }

  .el-menu {
    border-right: none;
  }

  .el-menu-item {
    padding-left: 50px !important;
    background-color: #001529
  }

  ::v-deep .el-submenu__title {
    background-color: #001529 !important;
  }

  // hover 高亮
  .el-menu-item:hover {
    color: #fff !important; // 菜单
  }

  .el-menu-item.is-active {
    color: #fff !important;
    //background-color: #0a60bd !important;
  }
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 100%;
  height: calc(100% - 48px);
}
</style>
